import styles from '../css/HomeInfo.module.css'
import { LoopOutline } from 'antd-mobile-icons'
import { Button, Switch, Popup, CalendarPickerView } from 'antd-mobile'
import { useDispatch, useSelector } from 'react-redux'
// import { updateFromAndTo } from '../../../store/slice/ticket'
import {
  updateFromAndTo,
  updateOnlyCRH,
  updateDate
} from '../../../store/slice/ticket'
import { useState, useMemo } from 'react'
import dayjs from 'dayjs'
import { dateFormat } from '../../../utils'
import { useNavigate } from 'react-router-dom'

function HomeInfo() {
  // useSelector(fn)
  // 使用 useSelector 这个 Hook，可以从全局 Store 众多的数据中，只把自己需要用到的那份数据选择出来
  // 从 store 中取出出发地和目的地
  const start = useSelector((store) => store.ticket.start)
  const end = useSelector((store) => store.ticket.end)
  const onlyCRH = useSelector((store) => store.ticket.onlyCRH)
  const date = useSelector((store) => store.ticket.date)
  // 调用 useDispatch() 这个 Hook，获取到 dispatch 函数，
  // 然后，通过 dispatch 函数，就能够调用到 store->slice 声明的 reducer 函数
  const dispatch = useDispatch()
  const [visible5, setVisible5] = useState(false)
  const nav = useNavigate()

  // useMemo 对数据进行缓存
  // useCallback 对函数进行缓存
  const dtObj = useMemo(() => dateFormat(date), [date])

  // 自定义每个日期下面要渲染的内容
  const renderBottom = (dt) => {
    // 形参中的 dt，就是日历组件中被渲染出来的每个日期
    // 如何计算形参中的 dt 是否为今天、明天、后天呢？
    // 需要用到 dayjs 第三方包，它提供了一个 diff() 函数，用来计算两个日期的差
    // dayjs() 如果直接调用 dayjs() 函数，返回的是今天的日期
    // dayjs(dt) 得到的就是指定的那个日期
    const c = Math.ceil(dayjs(dt).diff(dayjs(), 'day', true))

    if (c === 0) {
      return '今天'
    } else if (c === 1) {
      return '明天'
    } else if (c === 2) {
      return '后天'
    }
    return ''
  }

  // 点击搜索按钮，跳转到车票列表页面
  const gotoList = () => {
    nav(`/list?start=${start}&end=${end}&date=${date}&isSpeed=${onlyCRH}`)
  }

  return (
    <div className={styles.box}>
      <div className={[styles.row, styles.row1].join(' ')}>
        <div
          className={styles.left}
          onClick={() => nav('/city?type=from')}
        >
          {/* 布尔值 ? 真 : 假 */}
          {start ? (
            <span>{start}</span>
          ) : (
            <span style={{ color: '#666' }}>出发地</span>
          )}
        </div>
        {/* 交换的小图标 */}
        <LoopOutline
          fontSize={30}
          // dispatch(fn())
          onClick={() => dispatch(updateFromAndTo())}
        />
        <div
          className={styles.right}
          onClick={() => nav('/city?type=to')}
        >
          {end ? (
            <span>{end}</span>
          ) : (
            <span style={{ color: '#666' }}>目的地</span>
          )}
        </div>
      </div>
      {/* 点击这一行，显示“选择出发日期”的弹出层 */}
      <div
        className={[styles.row, styles.row2].join(' ')}
        onClick={() => setVisible5(true)}
      >
        {/* 出发日期 */}
        {/* TODO: 使用 dayjs 对出发日期的时间戳，进行格式化 */}
        <span className={styles.date}>{dtObj.date}</span>
        <span className={styles.day}>
          <span>{dtObj.day}</span>
          <span>{dtObj.info}</span>
        </span>
      </div>
      <div className={[styles.row, styles.row3].join(' ')}>
        <span>只看高铁/动车</span>
        {/* dispatch(fn(参数)) */}
        <Switch
          checked={onlyCRH}
          // onChange 的处理函数的形参 val 是最新的选中状态
          onChange={(val) => dispatch(updateOnlyCRH(val))}
        />
      </div>
      <div className={styles.row}>
        <Button
          block
          style={{ '--background-color': 'orange', '--text-color': '#fff' }}
          onClick={gotoList}
        >
          搜索
        </Button>
      </div>

      {/* 弹出层：用来选择出发日期 */}
      <Popup
        visible={visible5}
        onMaskClick={() => {
          setVisible5(false)
        }}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
          minHeight: '40vh'
        }}
      >
        <CalendarPickerView
          title="选择出发日期"
          min={Date.now()}
          max={Date.now() + 14 * 24 * 60 * 60 * 1000}
          renderTop={false}
          renderBottom={renderBottom}
          value={date}
          onChange={(val) => {
            console.log(val)
            if (val) {
              // 把形参中用户选择的日期 val 存到 store
              dispatch(updateDate(val.toString()))
            }
            // 关闭弹出层
            setVisible5(false)
          }}
        />
      </Popup>
    </div>
  )
}

export default HomeInfo
